<%@ page language="java" contentType="text/html; charset=UTF-8"	pageEncoding="UTF-8"%>
<%@ taglib uri="/WEB-INF/c.tld" prefix="c" %>
<c:if test="${!empty msg}">
<script>
	$(function() {
		$("#detail").hide();
		
		$("#toggle").click(function() {
			$("#detail").toggle();
		});
	});
</script>
<div id="msg" class="ui-widget">
<c:if test="${msg.type == 'E'}">
	<div class="ui-state-error ui-corner-all" style="margin-top: 5px; padding: 0 .7em;">
		<c:if test="${!empty msg.detail}">
			<p><span style="width: 90%;"><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>${msg.text}</span><span id="toggle" style="cursor: pointer; position: absolute; right: 25;">รายละเอียด</span></p>
			<p id="detail">${msg.detail}</p>
		</c:if>
		<c:if test="${empty msg.detail}">
			<p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>${msg.text}</p>
		</c:if>
	</div>
</c:if>
<c:if test="${msg.type == 'W'}">
	<div class="ui-state-highlight ui-corner-all" style="margin-top: 5px; padding: 0 .7em;"> 
		<c:if test="${!empty msg.detail}">
			<p><span style="width: 90%;"><span class="ui-icon ui-icon-notice" style="float: left; margin-right: .3em;"></span>${msg.text}</span><span id="toggle" style="cursor: pointer; position: absolute; right: 25;">รายละเอียด</span></p>
			<p id="detail">${msg.detail}</p>
		</c:if>
		<c:if test="${empty msg.detail}">
			<p><span class="ui-icon ui-icon-notice" style="float: left; margin-right: .3em;"></span>${msg.text}</p>
		</c:if>
	</div>
</c:if>
<c:if test="${msg.type == 'I'}">
	<div class="ui-widget-content ui-corner-all" style="margin-top: 5px; padding: 0 .7em;"> 
		<c:if test="${!empty msg.detail}">
			<p><span style="width: 90%;"><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>${msg.text}</span><span id="toggle" style="cursor: pointer; position: absolute; right: 25;">รายละเอียด</span></p>
			<p id="detail">${msg.detail}</p>
		</c:if>
		<c:if test="${empty msg.detail}">
			<p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>${msg.text}</p>
		</c:if>
	</div>
</c:if>
<c:if test="${msg.type == 'H'}">
	<div class="ui-widget-content ui-corner-all" style="margin-top: 5px; padding: 0 .7em;"> 
		<c:if test="${!empty msg.detail}">
			<p><span style="width: 90%;"><span class="ui-icon ui-icon-help" style="float: left; margin-right: .3em;"></span>${msg.text}</span><span id="toggle" style="cursor: pointer; position: absolute; right: 25;">รายละเอียด</span></p>
			<p id="detail">${msg.detail}</p>
		</c:if>
		<c:if test="${empty msg.detail}">
			<p><span class="ui-icon ui-icon-help" style="float: left; margin-right: .3em;"></span>${msg.text}</p>
		</c:if>
	</div>
</c:if>
</div>
</c:if>
